<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script type="text/javascript" src="../static/js/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="../static/js/login.js"></script>
    <script type="text/javascript" src="../static/js/logout.js"></script>
    <link rel="stylesheet" href="../static/css/all.css"/>
    <link rel="stylesheet" href="../static/css/user.css" type="text/css"/>
    <link rel="stylesheet" href="../static/css/navigation.css" type="text/css"/>
    <link rel="stylesheet" href="../static/css/food.css" type="text/css"/>
    <link rel="stylesheet" href="../static/css/login.css" type="text/css"/>
    <link rel="stylesheet" href="../static/css/background.css" type="text/css"/>
</head>
<body class="body">
<div class="menu">
    <span class="font_title">美食街</span>
    <span class="user"></span>
</div>
<div class="navigation">
    <ul class="navigationBar">
        <li><a href="/foodCity">浏览美食</a></li>
        <li><a href="/shoppingCart">购物车</a></li>
        <li><a href="/goOrder">我的订单</a></li>
        <li><a href="/info">我的</a></li>
    </ul>
</div>
<!--注册和登录实现-->
<div id="login" class="login_div_f">
    <!-- 登陆框标题 -->
    <div id="login-title" class="login-title">
        <span><a id="closeBtn" onclick="hideLogin()" style="cursor: pointer">关闭</a></span>
    </div>
    <!--登录框主体-->
    <div class="form_login">
        <table border="0">
            <form method="post" action="" class="login_form">
                <tr>
                    <td class="td_l">用户名：</td>
                    <td class="td_r"><input type="text" name="login" placeholder="用户名"/></td>
                </tr>
                <tr>
                    <td class="td_l">密码：</td>
                    <td class="td_r"><input type="password" name="password" placeholder="密码"/></td>
                </tr>
                <tr>
                    <td colspan="2" class="td_s"><input type="button" onclick="" value="确认" class="but_sub"/></td>
                </tr>
            </form>
        </table>
    </div>
    <div class="login_bottom">
        <div class="l_b_l">
            <span><a href="#">注册账号</a></span>
        </div>
        <div class="l_b_r">
            <span><a href="#">忘记密码</a></span>
        </div>
    </div>
</div>
<div class="bg"></div>
<div class="popularFood">
    <div class="food_div">
        <div class="on_by_one">
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        // alert("欢迎访问不知名的订饭网站，点击即可加入购物车")
        $.ajax({
            url: "/foods",
            method: "get",
            dataType: "json",
            success: function (rs) {
                //移除
                // $(".on_by_one").remove();
                for (let i = 0; i < rs.foods.length; i++) {
                    var food = "<div class='food' onclick='addShoppingCart(" + rs.foods[i].id + ", " + rs.foods[i].price + ")'>" +
                        "                <img src='" + rs.foods[i].pic + "' alt='' class='food_img'/>" +
                        "                <div class='food_detail'><p class='food_name'>" + rs.foods[i].name + "</p><p class='food_price'>￥" + rs.foods[i].price + "</p></div>" +
                        "            </div>";
                    if (i % 3 === 2) {
                        food += "<br />";

                    }
                    $(".on_by_one").append(food);
                }
            }
        });
        //点击登陆方法
        $(".but_sub").on("click", function () {
            var data = $(".login_form").serialize();
            $.ajax({
                url: "/login",
                dataType: "json",
                method: "post",
                data: data,
                success: function (rs){
                    if (rs.message === "失败"){
                        alert("登陆失败，请检查账号密码是否正确再试")
                    }
                    location.reload();
                }
            })
        });
    })
    // function logout(){
    //     $.ajax({
    //         url: "/logout",
    //         dataType: "json",
    //         method: "get",
    //         success: function (rs) {
    //             console.log(rs);
    //             window.location = rs.message;
    //         }
    //     })
    // }
    function login() {
        var data = $(".login_form").serialize();
        $.ajax({
            url: "/login",
            dataType: "json",
            method: "post",
            data: data,
            success: function (rs){
                if (rs.message === "失败"){
                    alert("登陆失败，请检查账号密码是否正确再试")
                }
                location.reload();
            }
        })
    }
    function showLogin(){
        //展示
        $('.login_div_f').css('display', 'block');
        $('.bg').css('display', 'block');
    }
    function hideLogin(){
        //展示
        $('.login_div_f').css('display', 'none');
        $('.bg').css('display', 'none');
    }
    function addShoppingCart(id, price) {
        var remark = prompt("请输入备注信息：");
        var num = prompt("请输入你想要加入购物车的个数：")
        var data = {
            "id": id,
            "remark": remark,
            "price": price,
            "num": num
        };
        $.ajax({
            url: "/addShopCart",
            dataType: "json",
            data: data,
            success: function (rs) {
                alert(rs.message);
            }
        })
    }
</script>
</html>